<template>
    <IContent v-model="componentProps">
        <ISearch v-model="search">
            <FormItem label="保证金" style="display: block;">
                <RadioGroup v-model="search.assure" type="button" size="small" @on-change="getLists(1)">
                    <Radio label="">全部</Radio>
                    <Radio :label="0">账册企业</Radio>
                    <Radio :label="1">电商企业</Radio>
                    <Radio :label="2">物流企业</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="客户状态" style="display: block;">
                <RadioGroup v-model="search.status" type="button" size="small" @on-change="getLists(1)">
                    <Radio label="">全部</Radio>
                    <Radio :label="0">待审核</Radio>
                    <Radio :label="1">审核中</Radio>
                    <Radio :label="2">驳回审核</Radio>
                    <Radio :label="3">已审核</Radio>
                    <Radio :label="4">出货冻结</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="客户名称">
                <Input v-model="search.name" placeholder="客户名称" size="small"></Input>
            </FormItem>
            <FormItem label="客户代码">
                <Input v-model="search.code" placeholder="客户代码" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <ButtonGroup>
                    <Button type="primary" icon="ios-search" size="small" @click="getLists(1)">搜索</Button>
                    <Button type="success" icon="ios-add" size="small" @click="openComponent(`ICreate`)">添加</Button>
                </ButtonGroup>
            </FormItem>
        </ISearch>

        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange" :loading="loading">
            <template slot-scope="{row, index}" slot="assure">
                <span v-if="row.assure === 0">账册企业</span>
                <span v-if="row.assure === 1">电商企业</span>
                <span v-if="row.assure === 2">物流企业</span>
            </template>
            <template slot-scope="{row, index}" slot="status">
                <span v-if="row.status === 0">待审核</span>
                <span v-if="row.status === 1">审核中</span>
                <span v-if="row.status === 2">驳回审核</span>
                <span v-if="row.status === 3">已审核</span>
                <span v-if="row.status === 4">冻结</span>
            </template>
            <template slot-scope="{row, index}" slot="action">
                <ButtonGroup>
                    <Button size="small" @click="openComponent('IUpdate', {id: row.id})"
                            v-if="row.status === 0 || row.status === 2">编辑
                    </Button>
                    <Button size="small" @click="submitForDestroy(row.id)" v-if="row.status === 0 || row.status === 2">
                        删除
                    </Button>
                    <Button size="small" v-if="row.status === 0" @click="submitForConfirm(row.id)">提交</Button>
                    <Button size="small" v-if="row.status === 1" @click="submitForExamine(row.id)">审核</Button>
                    <Button size="small" v-if="row.status === 1" @click="submitForReject(row.id)">驳回</Button>
                    <Button size="small" v-if="row.status === 3" @click="submitForFrozen(row.id)">冻结</Button>
                    <Button size="small" v-if="row.status === 4" @click="submitForThaw(row.id)">解冻</Button>
                    <Button size="small" @click="openComponent('IIView',{id:row.id})">查看</Button>
                </ButtonGroup>
            </template>
        </ITable>

        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../components/layout/IContent";
    import ISearch from "../../../../components/layout/ISearch";
    import ITable from "../../../../components/layout/ITable";
    import IContentMixins from "../../../../mixins/iContentMixins"

    export default {
        components: {
            ICreate: () => import('./create'),
            IUpdate: () => import('./update'),
            IIView: () => import('./view'),
            ITable, ISearch, IContent
        },
        mixins: [IContentMixins],
        data() {
            return {
                search: {},
                table: {
                    columns: [{
                        title: '客户代码',
                        key: 'code'
                    }, {
                        title: '公司简称',
                        key: 'short_name'
                    }, {
                        title: '公司名称',
                        key: 'name'
                    }, {
                        title: '保证金',
                        slot: 'assure'
                    },  {
                        title: '状态',
                        slot: 'status'
                    }, {
                        title: '操作',
                        slot: 'action'
                    }]
                },
            }
        },
        methods: {
            getLists(page) {
                this._lists(`customer/index`, page);
            },
            submitForConfirm(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`customer/index/${id}/confirm`).then(() => {
                        this.getLists(this.page.current);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }, submitForExamine(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`customer/index/${id}/examine`).then(() => {
                        this.getLists(this.page.current);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }, submitForReject(id) {
                let reject = '';
                this._confirm((h) => {
                    return h('Input', {
                        props: {
                            autofocus: true,
                            placeholder: '请输入驳回内容！',
                            type: "textarea",
                            rows: 4
                        },
                        on: {
                            input: (val) => {
                                reject = val;
                            }
                        }
                    })
                }).then(() => {
                    if (reject !== '') {
                        this.loading = true;
                        this.$http.put(`customer/index/${id}/reject`, {reject}).then(() => {
                            this.getLists(this.page.current);
                        }).finally(() => {
                            this.loading = false;
                        });
                    } else {
                        this.$Notice.error({title: '错误', desc: '驳回内容不能为空！'})
                    }
                });
            }, submitForFrozen(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`customer/index/${id}/frozen`).then(() => {
                        this.getLists(this.page.current);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }, submitForThaw(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`customer/index/${id}/thaw`).then(() => {
                        this.getLists(this.page.current);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }, submitForDestroy(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.delete(`customer/index/${id}`).then(() => {
                        this.getLists(this.page.current);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style>
</style>
